<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凑单品</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/gsproduct.css">
</head>
<body>
    <header>
        <button>返回</button>
        <p>凑单品</p>
        <img src="../images/header_app.png" alt="">
    </header>

    <!-- 凑单品标题导航 -->
    <!-- ****************京东 -->
    <div class="box">
        <div class="shopping">京东▲</div>
        <div class="area">华北▲</div>
        <div>免费区</div>
    </div>


    <!-- ***********分割线 -->
    <div class="line">
        <div></div>
        <div></div>
        <div></div>
    </div>


    <!-- ***********************下拉菜单 -->
    <ul class="mall"></ul>
    <ul class="city"></ul>


    <!-- **************商品列表 -->
    <ul class="list"></ul>

    
    
   


    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>

</body>
</html>

<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })
    
    function mall(data=[]){
        let html=""
        data.forEach(item=>{
            html+=`
                <li shopid=${item.shopId}>
                ${item.shopName}
                </li>
            `
        })
        $(".mall").html(html)
    }

    $.ajax({
        url:"http://chst.vip:1234/api/getgsshop"
    })
    .then(res=>{
        console.log(res.result);
        mall(res.result);

        // ***************获取列表数据
        $(".mall").on("click","li",function(){
            let shopid=$(this).attr('shopid')
            // console.log(shopid);
            $.ajax({
                url:"http://chst.vip:1234/api/getgsproduct",
                data:{
                    shopid:shopid,
                    areaid:0
                }
            })
                .then(res=>{
                console.log(res.result);
                console.log(789);
                render(res.result);
                })  

        })
    })

    // ************点击出现

$(".shopping").click(function(){
    $(".mall").toggle({
            display:"block"
        })
    console.log(111);
   
})

// ***********华东
    function city(data=[]){
        let html=""
        data.forEach(item=>{
            html+=`
                <li areaid=${item.areaId}>
                ${item.areaName}
                </li>
            `
        })
        $(".city").html(html)
    }
    $.ajax({
        url:"http://chst.vip:1234/api/getgsshoparea"
    })
    .then(res=>{
        console.log(res.result);
        city(res.result);
        

        // **********获取区域数据
        $(".city").on("click","li",function(){
            let areaid=$(this).attr("areaid")

        $.ajax({
            url:"http://chst.vip:1234/api/getgsproduct",
            data:{
                shopid:0,
                areaid:areaid
             }
        })
        .then(res=>{
                console.log(res.result);
                console.log(789);
                render(res.result);
        })  
        })

    })

    // ************点击出现

$(".area").click(function(){
    $(".city").toggle({
            display:"block"
        })
    console.log(111);
})

// ***********************第一次请求数据的商品列表函数
function render(data=[]){
        let html=""
        data.forEach(item=>{
            html+=`
                <li>
                    <img src="${item.productImg}" alt=""> 
                    <div>${item.productName}</div>
                    <p>${item.productPrice}</p>
                </li>
            `
        })
        $(".list").html(html)
    }
// 第一次请求数据
    $.ajax({
        url:"http://chst.vip:1234/api/getgsproduct",
        data:{
            shopid:0,
            areaid:0
        }
    })
    .then(res=>{
        console.log(res.result);
        render(res.result);

    })
   





    
    // 返回顶部
    $('footer .returntop').click(function(e){
        document.documentElement.scrollTop=0;
    })

</script>